<!--
 * @Description: 
 * @Author: BOye
 * @Date: 2023-11-06 16:35:31
 * @LastEditTime: 2023-11-06 16:47:06
 * @LastEditors: liutq
 * @Reference: 
-->
<template>
  <div id="container" style="height:100vh;width:100vw;">

  </div>
</template>

<script>
import * as THREE from 'three';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
// 实例化一个gui对象
const gui = new GUI();
//创建一个对象，对象属性的值可以被GUI库创建的交互界面改变
const obj = {
  x: 30,
};
// gui增加交互界面，用来改变obj对应属性
gui.add(obj, 'x', 0, 100);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;
// cube的位置
const originPositon = {
  x: 0,
  y: 0,
  z: 0
}
// 创建第一个 gui的参数分组   几何体位置
const cubeParams = gui.addFolder('几何体位置');
cubeParams.add(originPositon, 'x', 0, 20).onChange(val => {
  cube.position.x = val;
  renderer.render(scene, camera)

})

// function animate () {
//   requestAnimationFrame(animate);

//   cube.rotation.x += 0.01;
//   cube.rotation.y += 0.01;

//   renderer.render(scene, camera);
// }

// animate();
</script>
<style scoped>
#container {
  width: 100vw;
  height: 100vh;
}
</style>